import { useState, useEffect, } from 'react'
import axios from 'axios'
import { Breadcrumb, Divider, Col, Row } from 'antd';
import { HomeOutlined, } from '@ant-design/icons';
import { Link, } from 'react-router-dom'
import "./index.less"

export default function FrenchChateaux() {
  const [dataCommodity, setDataCommodity] = useState<any>([])
  const [category, setCategory] = useState<string>("法国酒庄酒")
  useEffect(() => {
    axios.get("http://localhost:8080/api/tabsData").then((response) => {
      if (dataCommodity == "") {
        setDataCommodity(response.data.result[2]);
      }
    });
  }, [dataCommodity]);

  return (
    <div className='classification'>
      <div className="classification_bread">
        <Breadcrumb separator="" style={{ background: 'none' }}>
          <Breadcrumb.Item><span><HomeOutlined style={{ marginRight: '5px' }} />您现在的位置</span></Breadcrumb.Item>
          <Breadcrumb.Separator>：</Breadcrumb.Separator>
          <Breadcrumb.Item><Link to="/home">首页</Link></Breadcrumb.Item>
          <Breadcrumb.Separator>{`>`}</Breadcrumb.Separator>
          <Breadcrumb.Item>法国酒庄酒</Breadcrumb.Item>
        </Breadcrumb>
        <Divider className='divider' />
      </div>
      <div className="classification_content">
        <Row>
          {dataCommodity.map((itemCommodity: any) => (
            <Col key={itemCommodity.id} span={6}>
              <div className='commodityContent'>
                <img src={itemCommodity.icon} alt="" />
                <div className="price">
                  <span className="now">￥{itemCommodity.price.toFixed(2)}</span>
                  <span className="pre"><s>{itemCommodity.nowPrice.toFixed(2)}</s></span>
                </div>
                <div className="commodityName">
                  <Link style={{ color: "#996633" }} to={`/details/${category}/${itemCommodity.name}/${itemCommodity.id}`}>{itemCommodity.commodityName}</Link>
                </div>
                <div className="description">{itemCommodity.description}</div>
              </div>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  )
}
